<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体样式</title>
    <style>
        h2{
            /* font-family: 'Times New Roman', Times, serif; */
            font-family: 'Microsoft YaHei';
        }
        p{
            /* 浏览器在使用字体前会挨个检查字体是否存在，只会使用第一个存在的字体 */
            font-family: 'Times New Roman', Times, serif;
           
        }
        body{
            /* h 标签比较特殊，文字打下需要单独设置，在body中设置并不生效 */
            font-size: 16px;
        }
        .bold{
            /* 建议使用数字 400 对应normal 700对应bold */
            /* font-weight: bold; */
            font-weight: 700; 
        }
    </style>
</head>
<body>
    <H2>白马篇</H2>
    <p>白马饰金羁，连翩西北驰。借问谁家子？幽并游侠儿。</p>
    <p>少小去乡邑，扬声沙漠垂。宿昔秉良弓，楛矢何参差！</p>
    <p>控弦破左的，右发摧月支。仰手接飞猱，俯身散马蹄。</p>
    <p>狡捷过猴猿，勇剽若豹螭。边城多警急，虏骑数迁移。</p>
    <p>羽檄从北来，厉马登高堤。长驱蹈匈奴，左顾凌鲜卑。</p>
    <p>弃身锋刃端，性命安可怀？父母且不顾，何言子与妻？</p>
    <p class="bold">名编壮士籍，不得中顾私。捐躯赴国难，视死忽如归。</p>
<a href="https://www.bilibili.com/video/BV1pE411q7FU?p=78">2020-7-24 下期直接做案例吧</a>

<table align="center" border="1" cellpadding="5" cellspacing="0">
    <tr>
        <th>样式表</th><th>优点</th><th>缺点</th> <th>使用频率</th><th>作用范围</th><th>链接</th>
    </tr>
    <tr>
        <td>行内样式</td>
        <td>书写方便，权重高</td>
        <td>结构与样式混写</td>
        <td>较少</td>
        <td>控制当前标签</td>
        <td><a href="#">贴吧</a></td>
    </tr>
    <tr>
        <td>内部样式</td>
        <td>部分结构和样式分离</td>
        <td>没有彻底分离</td>
        <td>较多</td>
        <td>控制一个页面</td>
        <td><a href="#">贴吧</a></td>
    </tr>
    <tr>
        <td>外部样式表</td>
        <td>完全实现结构和样式的分离</td>
        <td>需要引入</td>
        <td>最常使用</td>
        <td>控制多个页面</td>
        <td><a href="#">贴吧</a></td>
    </tr>
</table>
<p>section 标签的使用 主要用在文档中区分多个h标签</p>
<audio src="./video/music.m4a" controls="controls"></audio>
<video src="./video/BigBuck.m4v" controls="controls"></video>
</body>
</html>